<template>
	<view class="main">
		<view style="font-size: 32rpx;position: relative;">
			<view style="font-weight: 600;">单击设置</view>	
			<view style="color: green;position: absolute;right: 0;top: 0;" @tap="$wanlshop.auth(`/pages/user2/partner/lists?id=${id}`)">添加员工</view>		
		</view>
		
		<view class="nxc" v-if="dataList">	
			<view class="nxc-item" v-for="(item, index) in dataList" :key="item.id">
				<view class="item" @click="onMultiplePick(index)">
					<view class="content">	
						{{item.nickname}}					
					</view>	
					<view class="action">
						{{item.tag}}					
					</view>					
				</view>					
			</view>
		</view>
		<!-- 空 -->
		<view v-if="dataList.length == 0">
			<wanl-empty src="ticket_default3x" text="你还没有添加员工"/>
		</view>
		
		<view style="height: 60px;"></view>
		<view class="">
			<button v-if="loading" style="width: 90%;  margin-left: 5%;" class="cu-btn round lg bg-gradual-orange margin-lr-bj">
				<text class="wlIcon-jiazai wlIconfont-spin margin-right-xs"></text> 提交中...
			</button>
			<button v-else  style="width: 90%;  margin-left: 5%;"   @tap="confirm" class="cu-btn round lg bg-gradual-orange margin-lr-bj"> 保存</button>
		</view>
		
		
		<nxc-check ref="nxcCheck" 
		:list="checklist"  :defaults="defau" @confirm="onMultiplePickConfirm" :max="2" max-message="已超出最大选项"></nxc-check>
	</view>
</template>

<script>
 
export default {

	data() {
		return {
			dataList: [],
			checklist:[				
				'服务员',
				'库管'
			],
			index:0,
			defau:[],
			id:0,
			loading:false
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
	},
	
	methods: {
		async loadData(type) {
			let data = {
					page: this.current_page
				};
			if(type)data.type = type;
			await uni.request({
				url: '/wanlshop/user/getworker',
				method: 'POST',
				data: data,
				success: res => {					
					this.dataList = res.data.data
				}
			});
		},
		refreshList(){
			this.loadData();
		},
		onMultiplePick(index) {
			this.index = index;
			if(this.dataList[index].tag){
				this.defau = this.dataList[index].tag.split(',');
			} else {
				this.defau = [];
			}
			this.$refs.nxcCheck.show();
			
		},
		onMultiplePickConfirm(selectedList) {			
			this.dataList[this.index].tag = selectedList.join(','); 
			this.$refs.nxcCheck.close();
		},
		confirm() {	
			this.loading = true;
			uni.request({
				url: '/wanlshop/user/editWorkerTag',
				method: 'POST',
				data: {data:this.dataList},
				success: res => {					
					this.loading = false;
					this.$wanlshop.msg('设置成功');
				}
			});
		}
	}
};
</script>

<style>
	.main{
		width: 100%;height: 100#;background-color: #E3E8F7;margin-top: -30rpx;padding:24rpx;padding-top: 60rpx;
	}
	.nxc-item .item{
		margin: 20rpx 0;
		background-color: white;
		border-radius: 6px;
		padding: 10rpx;
		font-size: 32rpx;
		position: relative;
		
	}
	.nxc-item .item .content{
		border-left: 2px solid red;
		line-height: 40rpx;
		padding: 18rpx 20rpx;
	}
	.nxc-item .item .action{
		position: absolute;
		right: 10px;
		top: 30rpx;
		color: darkorange;
		font-size: 13px;
	}
	
</style>
